<template>
  <view class="region">
    <picker
      mode="multiSelector"
      @cancel="cancels"
      :range="range"
      range-key="name"
      @change="change"
      @columnchange="columnchange"
      :value="value"
      class="picker"
      :disabled="disabled"
    >
      <view class="content" :class="{ placeholder: !regionStr }">
        <slot></slot>
      </view>
    </picker>
  </view>
</template>

<script>
const regionData = require('@/static/json/region.json');
export default {
  name: "biaofun-region-two-level",
  /**
   * 数据
   */
  props: {
    // 是否禁用
    disabled: {
      type: Boolean,
      default: false,
    },

    // placeholder
    placeholder: {
      type: String,
      default: "请选择省/市",
    },

    // 默认值
    defaultValue: {
      type: Array,
      default() {
        return null;
      },
    },
  },

  /**
   * 数据
   */
  data() {
    return {
      range: [[], []], // 省/市/区
      value: [0, 0], // value 的值表示选择了 range 中的第几个（下标从 0 开始）,默认为 [0, 0, 0]，即 range 为 ['第一个省', '第一个省的第一个市', '第一个省的第一个市的第一个区']
      regionStr: "", // 选中的省市区字符串
    };
  },

  /**
   * 监听数据
   */
  watch: {
    // 默认值
    defaultValue() {
      // 设置/更新省市区数据
      this.defaultValue ? this.setDefaultValue() : this.setRange();
    },
  },

  /**
   * 组件初次加载完成
   */
  mounted() {
    // 设置/更新省市区数据
    this.defaultValue ? this.setDefaultValue() : this.setRange();
  },

  /**
   * 方法
   */
  methods: {
    /**
     * 设置/更新省市区数据
     */
    setRange() {
      // 省市区数据
      let range = [[], []];
      // 省
      regionData.forEach((el) => {
        range[0].push({
          id: el.id,
          level: el.level,
          name: el.name,
          pid: el.pid,
        });
      });

      // 市
      regionData[this.value[0]].children.forEach((el) => {
        range[1].push({
          id: el.id,
          level: el.level,
          name: el.name,
          pid: el.pid,
        });
      });

      // 更新省市区数据
      this.range = range;
    },

    /**
     * 设置默认值
     */
    setDefaultValue() {
      // 查找省
      let provinceIndex = regionData.findIndex((el) => {
        return el.name == this.defaultValue[0];
      });
      provinceIndex >= 0 ? {} : (provinceIndex = 0);

      // 查找市
      let cityIndex = regionData[provinceIndex].children.findIndex((el) => {
        return el.name == this.defaultValue[1];
      });
      cityIndex >= 0 ? {} : (cityIndex = 0);

      // 更新 value 的值
      this.value = [provinceIndex, cityIndex];

      // 设置/更新省市区数据
      this.setRange();

      // 更新选中的省市区字符串
      this.regionStr =
        regionData[provinceIndex].name +
        "·" +
        regionData[provinceIndex].children[cityIndex].name;
    },

    /**
     * 某一列的值改变时触发
     * @param {Number} event.detail.column 表示改变了第几列（下标从0开始）
     * @param {Number} event.detail.value 表示变更值的下标
     */
		columnchange(event) {
			console.log(event);
      // 改变的是省
      if (event.detail.column == 0) {
        this.value = [event.detail.value, 0, 0];
      }
      // 改变的是市
      if (event.detail.column == 1) {
        this.value.splice(1, 1, event.detail.value);
        this.value.splice(2, 1, 0);
      }
      // 设置/更新省市区数据
      this.setRange();
    },

    /**
     * 确认选择
     */
    change(event) {
      // 更新选中的省市区字符串
      this.regionStr =
        this.range[0][this.value[0]].name +
        "·" +
        this.range[1][this.value[1]].name;

      // 传递事件
      this.$emit("change1", [
        this.range[0][this.value[0]],
        this.range[1][this.value[1]],
      ]);
    },
    cancels() {
      //重置选择
      this.$emit("changes1");
    },
  },
};
</script>

<style lang="scss" scoped>
.content {
  text-align: right;
}

/* 文本多出部分用省略号表示 */
.ellipsis-1 {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

.placeholder {
  color: #949596;
}
</style>
